<template>
	<view class="contont" style="background-color: #f5f5f5;">
		<view class="pagenumber">
			<!-- 车辆牌照 -->
			<view style="height: 55px; display: flex; align-items: center;justify-content: space-between;border: 1px solid #F5F5F5;" >
							<view class="place">
					<text style="margin-left: 5px;font-size:15px;">车辆牌照</text>
				</view>
				<view style="margin-right: 15px; padding-right:0;  font-size:15px;display: flex;">
					<!-- <rich-text :nodes="nodes"></rich-text> -->
					<input type="text" style="width:110px ; margin-right: 8px;margin-top: -0.2px;text-align: right;" v-model="numbered"  placeholder="请输入车辆牌照" />
				
				</view>
				
				</view>
			<!-- 车辆型号 -->
			<view style="height: 55px; display: flex; align-items: center;justify-content: space-between;border: 1px solid #F5F5F5;">
						<view class="place">
				<text style="margin-left: 5px;font-size:15px;">车辆型号</text>
			</view>
			<view class="" style="display: flex;margin-right: 15px;">
			<picker class="Choice" :range="prices" @change="priceChange" style="width: 50px;">
			    {{ prices[Priced] }} 
			</picker>
			<image src="../../static/img/icon_youjian@2x.png" mode="" style="width: 19px; height: 19px;"></image>
			</view>
			
			</view>
			<!-- 车长 -->
			<view style="height: 55px; display: flex; align-items: center;justify-content: space-between;border: 1px solid #F5F5F5;">
						<view class="place">
				<text style="margin-left: 5px;font-size:15px;">车长(米)</text>
			</view>
			<view class="" style="display: flex;margin-right: 15px;">
			<picker class="Choice" :range="leng" @change="lenged" style="width: 50px;">
			    {{ leng[lenges] }}
				<text v-if="leng[lenges]=='请选择车长'"></text>
				<text v-if="leng[lenges]!='请选择车长'">米</text>
			</picker>
			<image src="../../static/img/icon_youjian@2x.png" mode="" style="width: 19px; height: 19px;"></image>
			</view>
			
			</view>
			<!-- 载重 -->
			<view style="height: 55px; display: flex; align-items: center;justify-content: space-between;border: 1px solid #F5F5F5;" >
							<view class="place">
					<text style="margin-left: 5px;font-size:15px;">车辆载重/吨</text>
				</view>
				<view style="margin-right: 15px; padding-right:0;  font-size:15px;display: flex;">
					<!-- <rich-text :nodes="nodes"></rich-text> -->
					<input type="text" style="width:110px ; margin-right: 8px;margin-top: -0.2px;text-align: right;" v-model="numberes"  placeholder="请输入车辆载重" />
				
				</view>
				
				</view>
				<!-- 颜色 -->
				<view style="height: 55px; display: flex; align-items: center;justify-content: space-between;border: 1px solid #F5F5F5;">
							<view class="place">
					<text style="margin-left: 5px;font-size:15px;">车辆颜色</text>
				</view>
				<view class="" style="display: flex;margin-right: 15px;">
				<picker class="Choice" :range="colores" @change="colored" style="width: 50px;">
				   <text v-if="coloring[colore]=='BLUE'">蓝牌</text>
				   <text v-if="coloring[colore]=='YELLOW'">黄牌</text>
				   <text v-if="coloring[colore]=='BLACK'">黑牌</text>
				   <text v-if="coloring[colore]=='WHITE'">白牌</text>
				   <text v-if="coloring[colore]=='GRADUALGREEN'">渐变绿色</text>
				   <text v-if="coloring[colore]=='GRADUALYELLOWGREEN'">黄绿渐变</text>
				   <text v-if="coloring[colore]=='GRADUALBLUEWHITE'">蓝白渐变</text>
				   <text v-if="coloring[colore]=='UNDEFINED'">未确定</text>
				</picker>
				<image src="../../static/img/icon_youjian@2x.png" mode="" style="width: 19px; height: 19px;"></image>
				</view>
				
				</view>
		</view>
		<view class="infromeid">
			<view class="cents" style="height: 50%;width: 100%;" v-if="imaged.length!=0">
					<text style="height: 100%;margin-left: 30rpx;padding-top: 32px;">行驶证照片</text>
				<image src="../../static/img/img_shangchuanxing@2x.png" mode="" style="width: 240px;height: 120px;" @click="img" v-if="imaged.length==0"></image>
				<image :src="imaged[0]" mode="" style="width: 240px;height: 120px;"  v-if="imaged.length!=0" @click="img"></image>
			</view>
			<view class="cents" style="height: 50%;width: 100%;" v-if="imaged.length==0">
					<text style="height: 100%;margin-left: 30rpx;padding-top: 32px;">行驶证照片</text>
				<image src="../../static/img/img_shangchuanxing@2x.png" mode="" style="width: 240px;height: 120px;" @click="img" v-if="imaged.length!=0"></image>
				<image :src="imag" mode="" style="width: 240px;height: 120px;" @click="img" ></image>
			</view>
			<view class="cents" style="height: 50%;width: 100%;">
					<text style="height: 100%;margin-left: 30rpx;padding-top: 32px;">示例图片</text>
					<image src="../../static/img/img_shangchuan@2x.png" mode="" style="width: 240px;height: 120px;"></image>
			</view>
		</view>
		<view style="margin-top: 10px;font-size: 13px; color: #888888;width: 100%;">
			<view style="margin-top: 10px;margin-left: 15px;">点击“提交”即表示您同意并愿意遵守<text @click="mex" style="color: #232D7A;">《用户协议》</text></view>
		</view>
		<button @click="but">提交</button>
	</view>
</template>

<script>
	import {ajax} from '../../api.js'
	export default {
		data() {
			return {
				numbered:"",
				numberes:"",
				add:[],
				imaged:[],
				images:[],
				imag:[],
				// 车辆型号
				prices:["请选择车辆型号","高栏车","平板车","冷藏车","厢车","挂车","高低板","特种车"],
				Priced:0,
				// 车长
				leng:["请选择车长","4.2","4.5","5.2","6.2","6.8","7.2","7.6","8.2","9.6","11.7","12","12.5","13","13.5","14","16","17","17.5","18","22"],
				lenges:0,
				// 颜色
				colores:["请选择车牌颜色","蓝牌","黄牌","黑牌","白牌","渐变绿色","黄绿渐变","蓝白渐变","未确定"],
				colore:0,
				coloring:["请选择车牌颜色","BLUE","YELLOW","BLACK","WHITE","GRADUALGREEN","GRADUALYELLOWGREEN ","GRADUALBLUEWHITE","UNDEFINED"],
			}
		},
		onLoad() {	
			var that=this
			ajax({
				url:"/v1/appdriver/user/carprofile",
				method:"post",
				success(res){
					
					that.numbered=res.data.message.carnum
					that.prices[that.Priced]=res.data.message.carmodel
					that.leng[that.lenges]=res.data.message.carlenth
					that.coloring[that.colore]=res.data.message.carPlateColor
					that.imag="https://www.uhuoda.com"+res.data.message.cardrivingnumphotoz
					
				}
			})
			ajax({
				url:"/v1/appdriver/get/token",
				method:"post",
				success(res){
					that.list=res.data.message.token
				}
			})
		},
		methods: {
			mex(){
				uni.navigateTo({
					url:"../mex/mex"
				})
			},
			but(){
				if(this.imaged.length==0){
					uni.showToast({
					    title:'请重新选择行驶证',
						icon:"none"
					})
				}else{
				
				uni.showLoading({
				    title: '加载认证中！'
				});
				var that=this
				var header;
						  header = { 
										
								'content-type': 'multipart/form-data', 
										
							    'cookie':uni.getStorageSync("sessionid")//读取cookie
										
							  };
						uni.uploadFile({
							url:"https://open.tf56.com/openGateway/fileUpload/landTransport/1/addVehicle?access_token="+that.list,
							method:"post",
							filePath: that.imaged[0],
							name: 'files',
							header:header,
							formData:{
								type:" DRIVINGCARD",
								vehiclePlate:that.numbered,
								vehicleLength:that.leng[that.lenges],
								vehicleType: that.prices[that.Priced] ,
								carPlateColor:that.coloring[that.colore]
							},
							success(res){
								
								if(JSON.parse(res.data).msg=="车辆已存在"||JSON.parse(res.data).msg=="操作成功"){
									uni.getStorage({
									key:"name",
									success:function(res){
										
										var header;
																	  header = { 
														
														     'content-type': 'multipart/form-data', 
														
														     'cookie':uni.getStorageSync("sessionid")//读取cookie
														
														  };
										uni.uploadFile({
											url:"https://www.uhuoda.com/v1/appdriver/user/editcarprofile",
											method:"post",
											filePath: that.imaged[0],
											name: 'cardrivingphotoz',
											header:header,
											formData:{
												phone:res.data.phone,
												carnum:that.numbered,
												carmodel:that.prices[that.Priced],
												carlenth:that.leng[that.lenges],
												carPlateColor:that.coloring[that.colore],
											},
											success(res) {
												console.log(res)
												if(JSON.parse(res.data).status=="OK"){
													uni.hideLoading()
												uni.navigateBack({
													delta:1
												})
												}
											}
										})
									}
									})
								}else{
									uni.showToast({
									    title: '认证错误',
										icon:"none"
									}) 	
								}
								
							}
							})
							}
			},
			
			priceChange(e){
			 this.Priced = e.detail.value;
			},
			lenged(e){
			this.lenges  = e.detail.value;
			},
			colored(e){
			this.colore  = e.detail.value;
			},
			img(){
					var  _self = this;
						  wx.showActionSheet({
						    itemList: ['拍照','从手机相册选择'],
						    success(res) {
						    
						      if(res.tapIndex==0){ //0是拍照
						        wx.chooseImage({
						          count: 1,
						          sizeType: ['compressed'],
						          sourceType: ['camera'],
						          success: function (res) {
						             _self.imaged= res.tempFilePaths;
						           },
						        })
						      } else if(res.tapIndex==1){
						        wx.chooseImage({
						          count: 1,
						          sizeType: ['compressed'],
						          sourceType: ['album'],
						          success: function(res) {
						          _self.imaged= res.tempFilePaths;
						          },
						        })
						      }
						    }
						  })
				},
				imged(){
						var that=this
						uni.chooseImage({
							success(res) {
								
													that.images = res.tempFilePaths
							}
						})
					}
		}
	}
</script>

<style>

.pagenumber{
	width:355px;
	height:279px;
	background:rgba(255,255,255,1);
	border-radius:8px;
	margin-top: 10px;
	}
	.place{
		display: flex;
		align-items: center;
		margin-left: 15px;
	}
	.Choice{
		width:110px !important;
		height:15px;
		font-size:15px;
		font-weight:400;
		color:rgba(155,155,155,1);
		text-align: right;
	}
	.infromeid{
		width:355px;
		height:285px;
		background:rgba(255,255,255,1);
		border-radius:8px;
		margin-top: 10px;
	}
	button{
		width:355px;
		height:44px;
		background:rgba(4,42,88,1);
		border-radius:8px;
		margin-top: 15px;
		margin-bottom: 15px;
		color: #FFFFFF;
	}
</style>
